<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF"
			status-bar left-icon="left" left-text="返回"
			title="我的购物车" @clickLeft="back" />
			<view>
				<view class="text">单选选中：{{JSON.stringify(sortFieldMap)}}</view>
				<uni-data-checkbox v-model="sortField" :localdata="sortFieldValues" @change="sortFiledChange"></uni-data-checkbox>
			</view>
			<view>
			<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">商品图片</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in cartList" :key="index">
					<uni-td>
						<uni-card >
							<image slot='cover' style="width: 100%;" :src="item.imgUrl"></image> 
							<text class="uni-body">{{item.skuName}}</text>
							<br>
							<text class="uni-body">价格:{{item.cartPrice}}</text>
							<uni-number-box v-model="item.skuNum" :min="0" :max="9" @change="skuNumChange(item)"/>
							<uni-collapse-item :title=item.checkedCoupon.couponName>
								<view class="content">
									<text class="text">{{item.checkedCoupon.rangeDesc}}</text>
									<br>
									<text class="text">{{item.checkedCoupon.payAmount}}</text>
									<button type="primary" v-show="item.checkedCoupon.isGet == 0" @click="getCouponInfo(item.checkedCoupon.id)">领取</button>
								</view>
							</uni-collapse-item>
						</uni-card>
					</uni-td>
				</uni-tr>
			</uni-table>
			</view>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageNo" :total="total" @change="change" />
			</view>
			
			<button type="primary"  @click="confirmOrder()">确认订单</button>
			

	</view>
</template>
<script>
import cartApi from '../../api/cart/cart.js'
import couponApi from '../../api/coupon/coupon.js'
import orderApi from '../../api/order/order.js'
import userApi from '../../api/user/user.js'
export default {
	components: {},
	data() {
		return {
			sortField:'',
			sortFieldMap:{
				"sortField": "price",
				"sortOrder": "desc"
			},
			sortFieldValues: [{
				text: '价格升序',
				value: 0
			}, {
				text: '价格降序',
				value: 1
			}, {
				text: '时间升序',
				value: 2
			}, {
				text: '时间降序',
				value: 3
			}],
			cartList: [
				{
					"id":1,
					"name":"手机",
					"num":2
				}
			],
			selectedCartList:[],
			// 每页数据量
			pageSize: 5,
			// 当前页
			pageNo: 1,
			// 数据总量
			total: 0,
		}
	},
	methods:{
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		// 多选
		selectionChange(e) {
			console.log(e.detail.index)//[1,2,3]
			this.selectedCartList = e.detail.index.map(i=>this.cartList[i])
			
			this.selectedCartList.forEach(cartInfo=>{
				this.getCheckedCouponBySkuId(cartInfo)
			})
			
			/* this.selectedCartList = [];
			for(let index of e.detail.index){
				this.selectedCartList.push(this.cartList[i])
			} */
		},
		sortFiledChange(e){
			console.log(e.detail.value)
			if(e.detail.value == 0){
				this.sortFieldMap.sortField = "price";
				this.sortFieldMap.sortOrder = "asc";
			}else if(e.detail.value == 1){
				this.sortFieldMap.sortField = "price";
				this.sortFieldMap.sortOrder = "desc";
			}else if(e.detail.value == 2){
				this.sortFieldMap.sortField = "updatetime";
				this.sortFieldMap.sortOrder = "asc";
			}else if(e.detail.value == 3){
				this.sortFieldMap.sortField = "updatetime";
				this.sortFieldMap.sortOrder = "desc";
			}
			this.findCartPage()
		},
		findCartPage(){
			cartApi.cartPage(this.pageNo,this.pageSize,this.sortFieldMap).then(res=>{
				this.cartList = res.data.records;
				this.cartList.forEach(cart=>{
					this.$set(cart,"checkedCoupon",{});
				})
				this.total = res.data.total;
			})
		},
		skuNumChange(cart){
			console.log(cart.skuNum)
			this.getCheckedCouponBySkuId(cart,cart.skuId,cart.skuNum)
		},
		getCheckedCouponBySkuId(cart){
			couponApi.getCheckedCouponBySkuId(cart.skuId,cart.skuNum)
			.then(res=>{
				if(res.ok){
					this.$set(cart,"checkedCoupon",res.data);
				}
			})
		},
		getCouponInfo(couponId){
			couponApi.getCouponInfo(couponId).then(res=>{
				uni.showToast({
				  icon: 'none',
				  title: res.message
				})
			})
		},
		confirmOrder(){
			
			uni.navigateTo({
				url:"/gmall/views/order/order?selectedCartList="+ JSON.stringify(this.selectedCartList)
			})
			
		}
	},
	onLoad(options) {
		this.findCartPage();
	}
}
</script>
<style>

</style>